import { Tabs, message, Spin, Empty, Button } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';

import type { FC } from 'react';

import { PRODCTION_NAME } from '@/pages/Renewal';
import { buyedProducts } from '@/services/orderManage';
import { getErrorMsg } from '@/util/utils';

import styles from './index.less';

interface Props {

}

const { TabPane } = Tabs;

interface PurchasedProductsState {
  productId: string;
  productName: string;
  productCategory: string;
  status: number;
  expireDate: string;
  buyedProductionLineNumber: number;
  buyedPersonNumber: number;
}

const PurchasedProducts: FC<Props> = () => {
  const [validOrderProductInfo, setValidOrderProductInfo] = useState<PurchasedProductsState[]>([]);
  const [productCategory, setProductCategory] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const getValidOrder = async () => {
    setLoading(true);
    const res = await buyedProducts();
    if (res.code === 200) {
      setValidOrderProductInfo(res.data.data);
      setLoading(false);
      setProductCategory(res.data.data[0]?.productCategory);
    } else {
      message.error(getErrorMsg(res));
    }
  };

  useEffect(() => {
    getValidOrder();
  }, []);

  const addAndRenewal = (type: number, item: any) => {
    localStorage.setItem('PurchasedProducts', JSON.stringify({
      ...item,
      price: 1980,
    }));
    if(type===2) {
      // 续费
      const timer = setTimeout(() => {
        window.open('Renewal');
        clearTimeout(timer);
      }, 0);
    }else if(type===1) {
      // 新增产线
      const timer = setTimeout(() => {
        window.open('AddProductionLineUserNum');
        clearTimeout(timer);
      }, 0);
    }
  };
  const switchTabContent = useCallback((item: any): React.ReactNode => {
    return <>
      <div key={item.productCategory} className={styles.currentOrder}>
        <div>{productCategory}产品</div>
        <div>
          订购版本：{item?.productName === undefined ? '' : PRODCTION_NAME + item?.productName}
        </div>
        <div>到期时间：{item?.expireDate}</div>
        <div>服务状态：{item?.status ===3 ? '已生效' : ''}</div>
        <div>
          产线数量(生效中)：{item?.buyedProductionLineNumber}
        </div>
        <div className={styles.buttons}>
          <Button disabled={item.productName=='体验版'} onClick={() => addAndRenewal(1, item)} style={{ marginRight: 10 }} type={'primary'}>新增产线</Button>
          <Button disabled={item.productName=='体验版'} onClick={() => addAndRenewal(2, item)} type={'primary'}>续费</Button>
        </div>
      </div>
    </>;
  }, [validOrderProductInfo, productCategory]);

  const tabsCallback = (key: string) => {
    setProductCategory(key);
  };

  return (
    <>
      <div className={styles.content}>
        <Spin className={styles.spin} spinning={loading}/>
        <div className={styles.title}>已购产品</div>
        {
          validOrderProductInfo.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>
        }
        <Tabs defaultActiveKey={productCategory} onChange={tabsCallback}>
          {
            validOrderProductInfo.map((item: any) => {
              return (
                <>
                  <TabPane tab={item.productCategory} key={item.productCategory}>
                    {
                      switchTabContent(item)
                    }
                  </TabPane>
                </>
              );
            })
          }
        </Tabs>

      </div>
    </>
  );
};
export default PurchasedProducts;
